<script setup lang="ts">
import {markRaw, onMounted, ref} from "vue";
import type {EChartsOption, EChartsType} from "echarts";
import * as echarts from "echarts";
import {useGetPieAnnularDataApi} from "@/api";
import type {PieAnnular} from "@/interface";


const pieAnnular = ref()
const option = ref<EChartsOption>()
const myChart = ref<EChartsType>()
const pieAndAnnularData = ref<PieAnnular>({
  pie_data:[],
  annular_data:[]
})
const init = async () => {
  const {data:res} = await useGetPieAnnularDataApi()
  pieAndAnnularData.value = res
  myChart.value = markRaw(echarts.init(pieAnnular.value));
  draw();
}
const draw = () => {
  option.value = {
    tooltip: {
      trigger: 'item',
      formatter: '{a} <br/>{b}: {c} ({d}%)'
    },
    legend: {
      data: [
        'Direct',
        'Marketing',
        'Search Engine',
        'Email',
        'Union Ads',
        'Video Ads',
        'Baidu',
        'Google',
        'Bing',
        'Others'
      ]
    },
    series: [
      {
        name: '房屋占比',
        type: 'pie',
        selectedMode: 'single',
        radius: [0, '30%'],
        label: {
          position: 'inner',
          fontSize: 14
        },
        labelLine: {
          show: false
        },
        data: pieAndAnnularData.value.pie_data
      },
      {
        name: '房屋占比',
        type: 'pie',
        radius: ['45%', '60%'],
        labelLine: {
          length: 30
        },
        label: {
          formatter: '{a|{a}}{abg|}\n{hr|}\n  {b|{b}：}{c}  {per|{d}%}  ',
          backgroundColor: '#F6F8FC',
          borderColor: '#8C8D8E',
          borderWidth: 1,
          borderRadius: 4,
          rich: {
            a: {
              color: '#6E7079',
              lineHeight: 22,
              align: 'center'
            },
            hr: {
              borderColor: '#8C8D8E',
              width: '100%',
              borderWidth: 1,
              height: 0
            },
            b: {
              color: '#4C5058',
              fontSize: 14,
              fontWeight: 'bold',
              lineHeight: 33
            },
            per: {
              color: '#fff',
              backgroundColor: '#4C5058',
              padding: [3, 4],
              borderRadius: 4
            }
          }
        },
        data: pieAndAnnularData.value.annular_data
      }
    ]
  }
  myChart.value.setOption(option.value, {notMerge: true});
}
onMounted(() => {
  init()
})
</script>

<template>
  <div ref="pieAnnular" class="pie_annular">
  </div>
</template>

<style scoped>
.pie_annular{
  width: 100%;
  height: 100%;
}
</style>